<template>
  <div class="form-wrap">
    <a-form
      ref="formRef"
      :model="formState"
      :rules="formRules"
      :wrapper-col="{ span: 16 }"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
      @validate="onValidate"
    >
      <a-form-item label="文章标题" name="title">
        <a-input v-model:value="formState.title" showCount allowClear />
      </a-form-item>

      <a-form-item label="文章简介" name="summary">
        <a-textarea
          v-model:value="formState.summary"
          showCount
          allowClear
          auto-size
        />
      </a-form-item>


      <a-form-item label="文章分类" name="category">
        <a-select
          v-model:value="formState.category"
          :options="cateList"
          showSearch
          :showArrow="false"
          :filter-option="false"
          @search="searchCate"
        >
          <template #dropdownRender="{ menuNode: menu }">
            <VNodes :vnodes="menu" />
            <a-divider style="margin: 4px 0" />
            <div
              style="padding: 4px 8px; cursor: pointer"
              @mousedown="(e) => e.preventDefault()"
              @click="addCateItem"
            >
              <plus-outlined />
              添加分类
            </div>
          </template>
        </a-select>
      </a-form-item>

      <a-form-item label="文章标签" name="tag">
        <a-select
          v-model:value="formState.tag"
          mode="multiple"
          :options="tagList"
          showSearch
          :showArrow="false"
          :filter-option="false"
          @search="searchTag"
        >
          <template #dropdownRender="{ menuNode: menu }">
            <VNodes :vnodes="menu" />
            <a-divider style="margin: 4px 0" />
            <div
              style="padding: 4px 8px; cursor: pointer"
              @mousedown="(e) => e.preventDefault()"
              @click="addTagItem"
            >
              <plus-outlined />
              添加分类
            </div>
          </template>
        </a-select>
      </a-form-item>

      <a-form-item label="文章状态" name="status">
        <a-radio-group v-model:value="formState.status">
          <a-radio-button value="0">草稿</a-radio-button>
          <a-radio-button value="1">发布</a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="置顶状态" name="isTop">
        <a-radio-group v-model:value="formState.isTop">
          <a-radio-button value="0">不置顶</a-radio-button>
          <a-radio-button value="1">置顶</a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="推荐状态" name="isNice">
        <a-radio-group v-model:value="formState.isNice">
          <a-radio-button value="0">普通</a-radio-button>
          <a-radio-button value="1">精品</a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="开启评论" name="isComment">
        <a-radio-group v-model:value="formState.isComment">
          <a-radio-button value="0">不开启</a-radio-button>
          <a-radio-button value="1">开启</a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item name="content" :wrapper-col="{ offset: 0, span: 24 }">
        <TEditor ref="editorRef" v-model="formState.content" />
      </a-form-item>

      <a-form-item :wrapper-col="{ offset: 0, span: 24 }">
        <a-space align="end" style="float:right">
          <a-button type="primary" html-type="submit">提交</a-button>
          <a-button html-type="submit">保存</a-button>
        </a-space>
      </a-form-item>
    </a-form>
    <TagModel ref="tagDrawerRef" title="添加标签" />
  </div>
</template>

<script>
import { computed, reactive, ref } from "vue"
import { useRoute } from "vue-router"
import store from "@/store"
import { CODEENUM } from "@/config"
import { insert, detail } from "@/api/article"
import { message } from "ant-design-vue"
import TEditor from "@/components/TEditor"
import TagModel from "@/components/TagModel"
export default {
  components: {
    TEditor,
    TagModel,
    VNodes: (_, { attrs }) => {
      return attrs.vnodes
    },
  },
  setup() {
    const tagDrawerRef = ref(null)
    const formState = ref({
      title: "",
      summary: "",
      status: "1",
      coverImg: "",
      content: "",
      tag: [],
      category: "",
      isComment: "0",
      isTop: "0",
      isNice: "0",
    })
    const formRules = {
      title: [{ required: true, message: "请输入文章标题！" }],
      summary: [{ required: true, message: "请输入文章简介！" }],
      category: [{ required: true, message: "请选择文章分类！" }],
      tag: [{ required: true, message: "请选择文章标签！" }],
      status: [{ required: true, message: "请选择文章状态！" }],
      isTop: [{ required: true, message: "请选择置顶状态！" }],
      isNice: [{ required: true, message: "请选择推荐状态！" }],
      isComment: [{ required: true, message: "请选择开启评论状态！" }],
      content: [{ required: true, message: "请输入文章内容！" }],
    }
    console.log(tagDrawerRef)
    const { query } = useRoute()
    const articleId = ref(query.id)
    if (articleId.value) {
      const getArticleDetail = async (id) => {
        const { data, code } = await detail({ id })
        if (code !== CODEENUM.GD_SUCCESS) return
        data.tag = data.tag.split(",")
        formState.value = data
      }
      getArticleDetail(articleId.value)
    }

    const cateList = computed(() =>
      store.getters.cateList.map((e) => {
        return { label: e.title, value: e.id }
      })
    )
    const tagList = computed(() =>
      store.getters.tagList.map((e) => {
        return { label: e.title, value: e.id }
      })
    )
    const onFinish = async (values) => {
      console.log("Success:", values)
      const params = JSON.parse(JSON.stringify(values))
      params.tag = params.tag.join(",")
      const { data, code } = await insert(params)
      if (code !== CODEENUM.OP_SUCCESS) return
    }

    const onFinishFailed = async (errorInfo) => {
      message.warning("请检查表单必填项！")
      console.log("Failed:", errorInfo)
    }
    const searchTag = (val) => {
      console.log(val)
    }
    const searchCate = (val) => {
      console.log(val)
    }

    const addCateItem = () => {
      console.log("添加分类")
    }

    const addTagItem = () => {
      tagDrawerRef.value.showDrawer()
      console.log("添加标签")
    }

    return {
      cateList,
      tagList,
      formState,
      formRules,
      onFinish,
      onFinishFailed,
      searchTag,
      searchCate,
      addCateItem,
      addTagItem,

      tagDrawerRef,
    }
  },
}
</script>

<style scoped lang="less">
.form-wrap {
  margin-bottom: 2rem;
  transition: all 0.3s;
  padding: 1.5rem 2rem;
  border-radius: 0.5rem;
  background-color: #fff;
  box-shadow: 0 4px 8px 6px rgb(7 17 27 / 8%);
}
</style>
